<template>
	<view class="container">
		<view class="address-form">
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">联系人</view>
					<input type="text" v-model="form.receiver" placeholder="请填写收货人的姓名" placeholder-class="placeholder"/>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">性别</view>
					<view class="radio" @tap="form.sex=1">
						<image :src="form.sex==2 ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>先生</view>
					</view>
					<view class="radio" @tap="form.sex=2">
						<image :src="form.sex==1 ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>女士</view>
					</view>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">手机号</view>
					<input type="text" v-model="form.mobile" placeholder="请填写收货手机号码" placeholder-class="placeholder"/>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">收货地址</view>
					<input type="text" @tap="chooseLocation" v-model="form.detail" placeholder="点击选择" placeholder-class="placeholder"/>
					<image src="/static/images/common/icon_jump_black3.png" class="jump-icon"></image>
				</view>
			</list-cell>
			<list-cell padding="30rpx">
				<view class="form-item">
					<view class="label">门牌号</view>
					<input type="text" v-model="form.description" placeholder="例:B座6楼606室" placeholder-class="placeholder"/>
				</view>
			</list-cell>
			
			<list-cell padding="30rpx" last>
				<view class="form-item">
					<view class="radio" @tap="form.is_default = !form.is_default">
						<image :src="!form.is_default ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'"></image>
						<view>设为默认地址</view>
					</view>
				</view>
			</list-cell>
		</view>
		
		<view class="save-btn">
			<button type="info" @click="save">保存</button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<!-- 登录popup -->
		<location-pop ref="location"></location-pop>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import locationPop from './location-auth.vue'
	import { mapMutations,mapState } from 'vuex'
	export default {
		components: {
			listCell,
			locationPop
		},
		data() {
			return {
				form: {
					receiver: '',
					sex: 1,
					mobile: '',
					detail: '',
					extend: '',
					isDefault: '',
					is_default:false,
					locationAuth:false,
				}
			}
		},
		onLoad({id}) {
			if(id) {
				this.form = this.$store.state.addresses.find(item => item.id == id)
				this.$set(this.form,'is_default',this.form.isDefault==1)
			}
		},
		methods: {
			...mapMutations(['SET_USERINFO', 'SET_ISLOGIN','SET_AUTH','SET_TOKEN','SET_ADDRESS']),
			auth(){
				let that=this;
				return new Promise((reslove,reject)=>{
					if(!that.locationAuth){
						uni.getSetting({
													      success: data => {
															  //判断是否授权
													        if (data.authSetting['scope.userLocation']) {
																that.locationAuth=true;
																reslove({});
													        } else {//null或者是false,表示没有授权，请求授权
															uni.authorize({
																scope:'scope.userLocation',
																success:res=>{
																	that.locationAuth=true;
																	reslove({});
																},
																fail:err=>{
																	that.locationAuth=false;
																	console.log('授权失败')
															
																	 reject();
																}
																,complete: () => {
																	
																}
															})
													        
													        }
													      },
														  fail: function(error) {
															 that.locationAuth=false;
															console.log(error);
														  }
													    })
					}else{
						reslove({});
					}
					
				})
			},
			chooseLocation() {
				let that=this;
					this.auth().then(res=>{
						uni.chooseLocation({
							success: res => {
								const {errMsg, address, latitude, longitude, name} = res
								if(errMsg === "chooseLocation:ok") {
									this.form = Object.assign(
										this.form, 
										{detail: address, extend: name},
									)
								}
							}
						})
					}).catch(err=>{
						console.log(that.$refs['LocationPopup'])
						that.$refs['location'].open();
							// return;
					 })
				
				
			
			},
			save(){
				let data=this.form;
				let that=this;
				let uid=uni.getStorageSync('userinfo').uid;
				that.$set(data,'userId',uid);
				if(this.empty(data.receiver) || this.empty(data.mobile) || this.empty(data.detail) || this.empty(data.extend)){
					this.$refs.uTips.show({
									title: '信息不得放空',
									type: 'warning',
									duration: '2300'
								})
				}
				that.$set(data,'isDefault',data.is_default?1:0);
				if(data.id){
					that.$u.api.address.put(data).then(res=>{
						this.$refs.uTips.show({
										title: '保存成功',
										type: 'success',
										duration: '2300'
									})
									that.getAddress(uid);
					})
				}else{
					that.$u.api.address.add(data).then(res=>{
						this.$refs.uTips.show({
										title: '保存成功',
										type: 'success',
										duration: '2300'
									})
									that.getAddress(uid);
					})
				}
				
			},
			empty(item){
				return this.$u.test.isEmpty(item);
			},
			getAddress(uid){
				 let that=this;
			 this.$u.api.address.get(uid).then(res=>{
				 let resArray=[];
				 if(!that.$u.test.isEmpty(res)){
					 resArray=res;
				 }
				 that.SET_ADDRESS(resArray);
				uni.navigateBack({})
				 
			 })
			},
		}
		
	}
</script>

<style lang="scss" scoped>
.address-form {
	margin-top: 20rpx;
	
	.form-item {
		width: 100%;
		display: flex;
		align-items: center;
		
		.label {
			width: 160rpx;
		}
		
		input {
			flex: 1;
		}
		
		.jump-icon {
			width: 30rpx;
			height: 48rpx;
		}
		
		.radio {
			display: flex;
			margin-right: 50rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
}

.save-btn {
	padding: 0 30rpx;
	margin-top: 60rpx;
	
	button {
		width: 100%;
		font-size: $font-size-extra-lg;
	}
}
</style>
